<template>
  <div class="header-list">
    <div class="content-link">
      <RouterLink
        class="nav"
        v-for="(content, index) in headerList"
        :to="content.path"
        :key="index"
      >
        {{ content.content }}
      </RouterLink>
    </div>
    <div class="github-link">
      <a href="https://github.com/wwwwwanggggg" target="blank">
        <img src="../assets/GitHub-Mark.png" alt="github" />
      </a>
    </div>
  </div>
</template>

<script lang="ts" setup>
const headerList = [
  { content: "首页", path: "/" },
  { content: "关于", path: "/about" },
  { content: "文档", path: "/docs" },
];
</script>

<style scoped>
.header-list {
  font-size: 20px;
  position: relative;
  display: flex;
  flex-direction: row;
  background-color: rgb(24, 91, 155);
  align-items: center;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.content-link {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.nav {
  display: flex;
  text-decoration: none;
  color: white;
  width: 80px;
  height: 40px;
  justify-content: space-around;
  align-items: center;
}

.nav:hover {
  background-color: grey;
}

.github-logo {
  float: right;
}

img {
  width: 1.5em;
  height: 1.5em;
  border-radius: 100%;
}

.github-link {
  position: absolute;
  right: 20px;
  padding-top: 8px;
}
</style>

<script lang="ts">
export default {
  name: "HeaderList",
};
</script>